<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            box-sizing: border-box;
        }
        .video{
            width: 100%;
            height: 350px;
            background-color: #000;
            position: relative;
        }
        .barrage-box{
            width: 100%;
            height: 175px;
            border: 1px solid red;
            position: absolute;
            left: 0;
            overflow: hidden;
        }
        button{
            width: auto;
            height: 30px;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="video">
            <div class="barrage-box">

            </div>

        </div>
        <!-- 弹幕模式 -->
        <button>开启弹幕</button>
        <input type="text" placeholder="请发表弹幕">
        <button class="send">发送</button>
        <button class="unsend">提前发送</button>
        <div>
            <p>['好','ig加油','theThy牛批']</p>
            <button class="sendarr">追加一个数组进去</button>
            <button class="unsendarr">追加一个数组到弹幕池顶部</button>
        </div>
    </div>
    <script src="./dist/barrage.js"></script>
    <script>
        var btn = document.querySelector('button');
        var list = document.querySelector('.list');
        var arr = [    //弹幕池
            '好菜','主播厉害','好菜','卢本伟牛批','卢本伟牛批','好菜',
            '卢本伟牛批','主播厉害','好菜','卢本伟牛批','卢本伟牛批','好菜',
            '主播厉害','主播厉害','主播厉害','主播厉害','卢本伟牛批','好菜',"我是最后一条一条"
        ]
        var barrage = new barrage({
            barrageEle:".barrage-box",  //弹幕容器css选择器支持id，class
            speed:50,   //弹幕速度 px/s
            maxRow:5,   //最大行数
            arr:arr,    //弹幕池
            activeStyle:"red", //自己发的字体颜色
            otherStyle:"#fff",  //别人发的字体颜色
        })
        btn.onclick = function(){       
            if (this.innerHTML == "开启弹幕") {
                this.innerHTML = "关闭弹幕"
            } else {
                this.innerHTML = "开启弹幕"
            }
            barrage.toggleStatus();      //自动切换弹幕开关
        };
        //发送弹幕事件
        var sendMsg = document.querySelector('.send');
        var unSendMsg = document.querySelector('.unsend');
        var sendArr = document.querySelector('.sendarr');
        var unsendarr = document.querySelector('.unsendarr');
        var ipt = document.querySelector('input');
        sendMsg.onclick = function(){
            var val = ipt.value;
            barrage.add(val,true);
            ipt.value = "";
        }
        unSendMsg.onclick = function(){
            var val = ipt.value;
            barrage.unadd(val,true)
            ipt.value = "";
        }
        sendArr.onclick = function(){
            var arr = ['好','ig加油','theThy牛批'];
            barrage.add(arr,true);
        }
        unsendarr.onclick = function(){
            var arr = ['好','ig加油','theThy牛批'];
            barrage.unadd(arr,true);
        }
    </script>
</body>
</html>